<template>
	<!-- 1转让2出租哟一个页面 -->
	<view class="content">
		<u-navbar :is-back='true' title="发布帖子" :border-bottom='true' />
		<view class="carp">
			<view class="text">信息标题
			</view>
			：
			<view class="carp_1">
				<input type="text" v-model="form.title" placeholder="请输入信息标题" placeholder-class='placeholderStyle' />
			</view>
		</view>
		<view class="carp">
			<view class="text">类别
			</view>：
			<view style="width:76%;">
				<xfl-select v-if='skulist.housetype' :list="
				skulist.housetype
				" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="styles"
					@change='inputclick' placeholder="请选择类别" :selectHideType="'hideAll'" />
			</view>
		</view>

		<view class="carp" v-if="form.info_type!=4">
			<view class="text">行业分类
			</view>：
			<view style="width:76%;">
				<xfl-select v-if='skulist.hyfl' :list="
				skulist.hyfl
				" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="styles"
					@change='inputclick1' placeholder="请选择类别" :selectHideType="'hideAll'" />
			</view>
		</view>
		<view class="carp" v-if="form.info_type==1||form.info_type==2">
			<view class="text">行业细分
			</view>：
			<view style="width:76%;">
				<xfl-select v-if='skulist.industryDetail' :list="
				skulist.industryDetail
				" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="styles"
					@change='inputclick2' placeholder="请选择行业细分" :selectHideType="'hideAll'" />
			</view>
		</view>
		<view class="carp" v-if="form.info_type==4">
			<view class="text">类别细分
			</view>：
			<view style="width:76%;">
				<xfl-select v-if='skulist.industryDetail' :list="
				skulist.industryDetail
				" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="styles"
					@change='inputclick2' placeholder="请选择类别细分" :selectHideType="'hideAll'" />
			</view>
		</view>
		<view class="carp">
			<view class="text">区域
			</view>：
			<view class="carp_1" @click="show_(true)">
				<input type="text" disabled v-model="qyname" placeholder="请选择区域" placeholder-class='placeholderStyle' />
				<u-icon color="#999999" size="28" name="arrow-down" />
			</view>
		</view>
		<view class="carp">
			<view class="text">商圈
			</view>：
			<view style="width:76%;" v-if="skulist.businessDistrict.length>0">
				<xfl-select v-if='skulist.businessDistrict' :list="
				skulist.businessDistrict
				" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="styles"
					@change='inputclick3' placeholder="请选择商圈" :selectHideType="'hideAll'" />
			</view>
			<view class="carp_1" v-else @click="$toast('请先选择区域')">
				<input type="text" disabled placeholder="请选择商圈" placeholder-class='placeholderStyle' />
				<u-icon color="#999999" size="28" name="arrow-down" />
			</view>
		</view>
		<view class="carp" v-if="form.info_type!=3">
			<view class="text">位置
			</view>：
			<view class="carp_1" @click="map">
				<input type="text" disabled v-model="form.detail_address" placeholder="请输入位置"
					placeholder-class='placeholderStyle' />
				<image src="@/static/img/zb.png" style="width: 31rpx;height: 46rpx;" />
			</view>
		</view>
		<view class="carp" v-if="form.info_type==1||form.info_type==2">
			<view class="text">面积
			</view>：
			<view class="carp_1">
				<input type="text" v-model="form.space" placeholder="请输入面积" placeholder-class='placeholderStyle' />
				<text class="fot">㎡</text>

			</view>
		</view>
		<view class="carp" v-if="form.info_type==3">
			<view class="text">面积
			</view>：
			<view class="carp_2">
				<input type="text" v-model="form.min_space" placeholder="请输入面积" placeholder-class='placeholderStyle' />
				<text class="carp_2_t1"></text>
				<input v-model="form.max_space" type="text" placeholder="请输入面积" placeholder-class='placeholderStyle' />
				<text class="carp_2_t2">㎡</text>
			</view>
		</view>
		<view class="carp" v-if="form.info_type==1||form.info_type==2">
			<view class="text">租金
			</view>：
			<view class="carp_1">
				<input type="text" v-model="form.rent" placeholder="请输入金额" placeholder-class='placeholderStyle' />
				<text class="fot">元/月</text>
			</view>
		</view>
		<view class="carp" v-if="form.info_type==4">
			<view class="text">价格
			</view>：
			<view class="carp_1">
				<input type="text" v-model="form.rent" placeholder="请输入金额" placeholder-class='placeholderStyle' />
				<text class="fot">元</text>
			</view>
		</view>
		<view class="carp" v-if="form.info_type==3">
			<view class="text">预算
			</view>：
			<view class="carp_2">
				<input type="text" v-model="form.min_budget" placeholder="请输入预算" placeholder-class='placeholderStyle' />
				<text class="carp_2_t1"></text>
				<input type="text" v-model="form.max_budget" placeholder="请输入预算" placeholder-class='placeholderStyle' />
				<text class="carp_2_t2">元/月</text>
			</view>
		</view>
		<view class="carp" v-if="form.info_type==3">
			<view class="text">转让费
			</view>：
			<view style="width:76%;">
				<xfl-select :list="
		zrlist
				" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="styles"
					@change='inputclickzr' placeholder="请选择转让费" :selectHideType="'hideAll'" />
			</view>
		</view>
		<view class="carp" v-if="form.info_type==2">
			<view class="text">转让费
			</view>：
			<view class="carp_1">
				<input type="text" v-model="form.transfer_fee" placeholder="请输入金额"
					placeholder-class='placeholderStyle' />
				<text class="fot">元/月</text>
			</view>
		</view>
		<view class="carp" v-if="form.info_type==1">
			<view class="text">免租期
			</view>：
			<view class="carp_1">
				<input type="text" v-model="form.transfer_fee" placeholder="请输入天数"
					placeholder-class='placeholderStyle' />
				<text class="fot">天</text>
			</view>
		</view>
		<view class="carp">
			<view class="text">内容详情
			</view>：
			<view style="width: 76%;">
				<u-input v-model="form.content" type="textarea" :border="true" auto-height placeholder="请输入内容.." />
			</view>
		</view>
		<view class="carp">
			<view class="text">联系人
			</view>：
			<view class="carp_1">
				<input type="text" v-model="form.contact_user" placeholder="请输入联系人"
					placeholder-class='placeholderStyle' />
			</view>
		</view>
		<view class="carp">
			<view class="text">联系电话
			</view>：
			<view class="carp_1">
				<input type="text" v-model="form.mobile" placeholder="请输入联系电话" placeholder-class='placeholderStyle' />
			</view>
		</view>
		<view class="carp" v-if="form.info_type==1||form.info_type==2">
			<view class="text">配套信息
			</view>：
			<view class="radio">
				<u-checkbox-group active-color='#FF1B1B' @change="checkboxGroupChange">
					<view class="" style="display: flex; flex-wrap: wrap">
						<u-checkbox style="width: 33%;
						 margin-bottom: 10rpx;" @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list2"
							:key="index" :name="item.name">{{item.name}}</u-checkbox>
					</view>
				</u-checkbox-group>
			</view>
		</view>
		<view class="carp" v-if="form.info_type!=3">
			<view class="text">上传图片
			</view>：
			<view class="radio">
				<view style="display: flex;flex-wrap: wrap;">
					<u-upload @on-error='onerror' :header="{
						token:token
					}" @on-success='onsuccess' :action="'https://puputong.huijipin.cn/api/'+'/Common/upload'"
						:show-upload-list="false" :custom-btn="true">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<image src="../../static/img/sc.png" />
							<text>上传</text>
						</view>
					</u-upload>
					<view class="img" v-for="(item,index) in flist">
						<image class="image1" @click='$pimage(item)' :src="item" />
						<u-icon @click="sc(item,index)" name='close-circle-fill' class="icon" size="40" color='#FF1B1B'>
						</u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="foot" @click="submit">
			<text v-if="form.info_type==1">发布出租</text>
			<text v-if="form.info_type==2">发表转让</text>
			<text v-if="form.info_type==3">发表求租</text>
			<text v-if="form.info_type==4">发布设备</text>

		</view>
		<!-- 支付页面 -->
		<pay-ment ref='child' />
		<!-- 选择套餐页面 -->
		<select-package ref='child2' />
		<!-- //区域选择呢器 -->
		<u-select v-model="show" mode="mutil-column-auto" :list="listqy" @confirm="confirm" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listqy: [],
				token: '',
				show: false,
				city_id: '', //区,
				qyname: '',
				form: {
					info_type: 2,
					detail_address: ''
				},
				flist: [],
				value: '',
				skulist: {
					housetype: [],
					industryDetail: [],
					hyfl: [],
					businessDistrict: [],
				},
				type: 1,
				zrlist: [{
						value: '接受',
						id: 1
					},
					{
						value: '不接受',
						id: 0
					}
				],
				list2: [{
						name: '客梯',
						img: "https://puputong.huijipin.cn/uploads/20220324/5eb8fe7bcebbf800761a4aa6ac705d95.png",
						type: 1,
						checked: false,
						disabled: false
					},
					{
						name: '货梯',
						img: "https://puputong.huijipin.cn/uploads/20220324/a2a4e685e36ae795cf1afda409d46292.png",
						type: 2,
						checked: false,
						disabled: false
					},
					{
						name: '中央空调',
						img: "https://puputong.huijipin.cn/uploads/20220324/62c9f56915adf7a7fd8281f6ae433c34.png",
						type: 3,
						checked: false,
						disabled: false
					},
					{
						name: '停车位',
						img: "https://puputong.huijipin.cn/uploads/20220324/5eb8fe7bcebbf800761a4aa6ac705d95.png",
						type: 4,
						checked: false,
						disabled: false
					},
					{
						name: '天然气',
						img: "https://puputong.huijipin.cn/uploads/20220324/ba73f35b1affc077443e9bde3ce82796.png",
						type: 5,
						checked: false,
						disabled: false
					},
					{
						name: '网络',
						img: "https://puputong.huijipin.cn/uploads/20220324/9c8d55b7a3a55305a12e2a7eefd43726.png",
						type: 6,
						checked: false,
						disabled: false
					},
					{
						name: '暖气',
						img: "https://puputong.huijipin.cn/uploads/20220324/ae80b3e8b0b6f8df9e37d019c2439dff.png",
						type: 7,
						checked: false,
						disabled: false
					},
					{
						name: '扶梯',
						img: "https://puputong.huijipin.cn/uploads/20220324/bfd76739178b757fe011349a9548c5e0.png",
						type: 8,
						checked: false,
						disabled: false
					},
					{
						name: '上水',
						img: "https://puputong.huijipin.cn/uploads/20220324/6195ea4029aa56b212562d9cba1fc77f.png",
						type: 9,
						checked: false,
						disabled: false
					},
					{
						name: '下水',
						img: "https://puputong.huijipin.cn/uploads/20220324/644354749846003352b9b495d1288310.png",
						type: 10,
						checked: false,
						disabled: false

					},
					{
						name: '排烟',
						img: "https://puputong.huijipin.cn/uploads/20220324/12b76ecb2db0f5f99a2b3809a164af69.png",
						type: 11,
						checked: false,
						disabled: false
					},
					{
						name: '排污',
						img: "https://puputong.huijipin.cn/uploads/20220324/598c82c886ed36a48d2c6d299e5353e7.png",
						type: 12,
						checked: false,
						disabled: false
					},

					{
						name: '管煤',
						img: "https://puputong.huijipin.cn/uploads/20220324/7aa5b60cd5838e8bb0c2bf07a4a11add.png",
						type: 13,
						checked: false,
						disabled: false
					},
					{
						name: '380V',
						img: "https://puputong.huijipin.cn/uploads/20220324/df9fd9ac8aa2438ec9bfcaf1aabece4a.png",
						type: 14,
						checked: false,
						disabled: false
					},
					{
						name: '可明火',
						img: "https://puputong.huijipin.cn/uploads/20220324/db9b7945cd5b5857fcf01d6fb630f2f2.png",
						type: 15,
						checked: false,
						disabled: false
					},
					{
						name: '外摆区',
						img: "https://puputong.huijipin.cn/uploads/20220324/133613aae3bc4d82021daa9ff074f6df.png",
						type: 16,
						checked: false,
						disabled: false
					},
				],
				list: [{
						name: '客梯',
						checked: false,
						disabled: false
					},
					{
						name: '货梯',
						checked: false,
						disabled: false
					},
					{
						name: '空调',
						checked: false,
						disabled: false
					},
					{
						name: '扶梯',
						checked: false,
						disabled: false
					},
					{
						name: '天然气',
						checked: false,
						disabled: false
					}

				],
				styles: 'height: 80rpx;background: #FFFFFF;border: 1px solid #E1E1E1;border-radius: 10rpx'
			};
		},
		onLoad(e) {
			this.token = uni.getStorageSync('token')
			this.form.info_type = e.type,
				this.api('Info/housetype').then(res => {
					this.skulist.housetype = res.data.data
					this.skulist.housetype.forEach(v => {
						v.value = v.name
					})
					console.log(this.skulist);
				})
			//细分
			this.api('Info/industryDetail').then(res => {
				this.skulist.industryDetail = res.data
				this.skulist.industryDetail.forEach(v => {
					v.value = v.name
				})
			})
			//行业
			this.api('Info/industry').then(res => {
				this.skulist.hyfl = res.data
				this.skulist.hyfl.forEach(v => {
					v.value = v.name
				})
			})
			//区域
			this.api('Index/areaList').then(res => {
				this.listqy = res.data.data
				this.listqy.forEach(v => {
					v.childlist.forEach(a => {
						a.children = a.childlist,
							a.label = a.name
						a.value = a.id
					})
					v.children = v.childlist,
						v.label = v.name
				})
				this.listqy.forEach(res => {
					res.children.forEach(v => {
						v.children.forEach(a => {
							a.label = a.name
							a.value = a.id
						})
					})
				})
			})
			//商圈
			if (this.city_id) {
				this.api('Info/businessDistrict', {
					city_id: this.city_id
				}).then(res => {
					this.skulist.businessDistrict = res.data.data
					this.skulist.businessDistrict.forEach(v => {
						v.value = v.name
					})
				})
			}

		},
		watch: {
			//监听商圈
			city_id(a) {
				if (a) {
					this.api('Info/businessDistrict', {
						city_id: a
					}).then(res => {
						this.skulist.businessDistrict = res.data.data
						this.skulist.businessDistrict.forEach(v => {
							v.value = v.name
						})
					})
				}
			},
		},
		methods: {
			show_(a) {
				this.show = a
			},
			onerror(a, b, c, d) {
				console.log(a, b, c, d);
			},
			//上传图片
			onsuccess(a, b, c) {
				console.log(a.data.fullurl);
				this.flist.push(a.data.fullurl)
			},
			//选择区域
			confirm(a) {
				console.log(a);
				this.form.area_id = a[2].value
				this.qyname = a[2].label
				this.city_id = a[1].value
			},
			map() {
				uni.chooseLocation({
					success: (res) => {
						this.form.detail_address = res.address
						this.form.lat = res.latitude //纬度
						this.form.lng = res.longitude //经度
						console.log(this.form.detail_address, '详细地址');
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					},
					fail: (err) => {
						// 	console.log(err,'错误');
						if (err.errMsg === "chooseLocation:fail auth deny") {
							uni.showModal({
								title: '温馨提示',
								content: '请打开位置权限',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (settingdata) => {
												if (settingdata
													.authSetting[
														'scope.userLocation'
													]) {
													this.map()
													// this.$toast(
													// 	'点击图片保存到相册')
												} else {
													this.$toast('保存失败')
												}
											},
											fail: (v) => {
												console.log(v);
											}
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}

								}

							})
						}
					}
				});
			},
			// 删除照片
			sc(a, index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个图片?',
					success: (res) => {
						if (res.confirm) {
							this.flist.splice(index, 1)
							this.$toast('删除成功')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//发布
			submit() {
				this.form.images = this.flist.toString()
				if (!this.form.title) {
					this.$toast('请输入标题!')
					return
				}
				if (!this.form.house_type_id) {
					this.$toast('请输入类别!')
					return
				}
				if (!this.form.industry_id) {
					this.$toast('请选择行业分类!')
					return
				}
				if (!this.form.industry_detail) {
					this.$toast('请选择行业细分!')
					return
				}
				if (!this.form.area_id) {
					this.$toast('请选择区域!')
					return
				}
				if (!this.form.bus_dis_id) {
					this.$toast('请选择商圈!')
					return
				}
				if (!this.form.detail_address) {
					this.$toast('请选择详细地址!')
					return
				}
				if (!this.form.space) {
					this.$toast('请输入面积!')
					return
				}
				if (!this.form.rent) {
					this.$toast('请输入租金!')
					return
				}
				if (!this.form.transfer_fee) {
					this.$toast('请输入转让费!')
					return
				}
				// if(!this.form.rent){
				// 	this.$toast('请输入租金!')
				// 	return
				// }
				if (!this.form.content) {
					this.$toast('请输入内容详情!')
					return
				}
				console.log(this.form.matchingdata);
				if (!this.form.matchingdata) {
					this.$toast('请选择配套信息!')
					return
				}
				if (!this.form.images) {
					this.$toast('请选择图片!')
					return
				}
				if (!this.form.contact_user) {
					this.$toast('请输入联系人!')
					return
				}
				if (!this.form.mobile) {
					this.$toast('请输入联系电话!')
					return
				}
				this.$refs.child2.sign(this.form)
			},
			//是否接受转让
			inputclickzr(a) {
				this.form.is_transfer= a.orignItem.id
			},
			//类别
			inputclick(a, b) {
				this.form.house_type_id = a.orignItem.id
			},
			//行业细分
			inputclick2(a, b) {
				this.form.industry_detail = a.orignItem.id
				console.log(this.form)
			},
			//商圈
			inputclick3(a) {
				this.form.bus_dis_id = a.orignItem.id
			},
			// 行业
			inputclick1(a) {
				this.form.industry_id = a.orignItem.id
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				let ab = []
				this.list2.forEach(v => {
					e.forEach(a => {
						if (v.name == a) {
							ab.push(v.type)
						}
					})

				})
				this.form.matchingdata = ab.toString()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 100rpx;

		.foot {
			width: 91%;
			position: fixed;
			bottom: 20rpx;
			height: 80rpx;
			background: #FF1B1B;
			border-radius: 40rpx;
			text-align: center;
			left: 50%;
			transform: translateX(-50%);
			line-height: 80rpx;
			font-size: 30rpx;
			font-family: OPPOSans;
			font-weight: 500;
			color: #FFFFFF;

		}

		/deep/ .placeholderStyle {
			font-size: 26rpx;
			font-family: OPPOSans;
			font-weight: 400;
		}

		.carp {
			display: flex;
			padding: 0rpx 25rpx 30rpx 25rpx;
			align-items: center;

			.fot {
				font-size: 32rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #999999;
			}

			.radio_1 {
				display: flex;
				flex-wrap: wrap;
			}

			.radio {
				width: 76%;

				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					margin-left: 10rpx;
					margin-bottom: 10rpx;
					position: relative;

					.icon {
						position: absolute;
						top: 0;
						right: 0;
					}

					.image1 {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
				}

				.slot-btn {
					box-sizing: border-box;
					width: 160rpx;
					height: 160rpx;
					background: #FFFFFF;
					border: 1px solid #E1E1E1;
					border-radius: 10rpx;
					text-align: center;
					position: relative;

					image {
						width: 47rpx;
						margin-top: 30rpx;
						height: 42rpx;
					}

					text {
						width: 100%;
						height: 52rpx;
						position: absolute;
						line-height: 52rpx;
						bottom: 0rpx;
						background: #BFBFBF;
						display: block;
						font-size: 26rpx;
						font-family: OPPOSans;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.text {
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #333333;
				display: block;
				width: 18%;
				text-align: justify;
				text-align-last: justify;
				position: relative;
				top: 20rpx;

				&:after {
					content: '';
					width: 100%;
					display: inline-block;
				}
			}

			.carp_1 {
				padding: 0 20rpx 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 70%;
				height: 80rpx;
				background: #FFFFFF;
				border: 1px solid #E1E1E1;
				border-radius: 10rpx;

				input {
					width: 75%;
				}
			}

			.carp_2 {
				width: 70%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.carp_2_t2 {
					font-size: 32rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #999999;
				}

				.carp_2_t1 {
					width: 29rpx;
					height: 2rpx;
					background: #E1E1E1;
				}

				input {
					box-sizing: border-box;
					width: 180rpx;
					height: 80rpx;
					background: #FFFFFF;
					border: 1px solid #E1E1E1;
					padding-left: 20rpx;
					padding-right: 20rpx;
					border-radius: 10px
				}
			}
		}
	}
</style>
